<template>
	<uni-popup ref="popup" type="center" @change="e=>$emit('input',e.show)">
		<view class="flex-column popup-container">
			<view class="flex-row justify-between flex-shrink header" v-if="!hideHeader">
				<view class="text-ellipsis title">
					<text>{{title}}</text>
				</view>
				<view @click="e=>$emit('input', false)" class="flex-row justify-center align-center close">
					<uni-icons type="closeempty" size="16"></uni-icons>
				</view>
			</view>
			<scroll-view enable-flex scroll-y class="flex1 content">
				<slot></slot>
			</scroll-view>
			<view class="footer-btn" v-if="!hideFooter">
				<button :open-type="openType" @click="onConfirm()" :class="['sub-btn',lodaing?'disabled':'']">
					<text>{{confirmText}}</text>
				</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		emits: ['onConfirm'],
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			lodaing: {
				type: Boolean,
				default: false,
			},
			hideHeader:Boolean,
			hideFooter: {
				type: Boolean,
				default: true,
			},
			title: {
				type: String,
				default: "",
			},
			openType: {
				type: String,
				default: "",
			},
			confirmText: {
				type: String,
				default: "确定",
			},
		},
		watch: {
			value: {
				immediate: true,
				handler(val) {
					this.toggleModal(val)
				}
			},

		},
		onReady() {
			this.toggleModal(this.value)
		},
		methods: {
			onConfirm() {
				if (this.lodaing) {
					return
				}
				this.$emit('onConfirm')
			},
			toggleModal(val) {
				const ref = this.$refs.popup
				if (!ref) {
					return;
				}
				if (val) {
					if (typeof ref.open === 'function') ref.open()
				} else {
					if (typeof ref.close === 'function') ref.close()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-container {
		height: 80%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;

		.header {
			.title {
				line-height: 80rpx;
				padding: 0 20rpx;
				font-size: 30rpx;
			}

			.close {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.content {
			padding: 20rpx 0;
			overflow-y: auto;

			.cate-picker {
				border: solid 1px #F1F1F1;
				line-height: 80rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
